<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:mo="https://gitee.com/aun/Timo">
<body>

<div class="layui-form timo-compile" id="app">
    <div class="layui-card-body">

            <div class="layui-form-item">
                <label class="layui-form-label required">菜单类型</label>
                <div class="layui-input-block">

                    <el-select name="type" v-model="form_data.type">
                        <el-option value="">- 请选择 -</el-option>
                        <el-option value="1" label="目录">目录</el-option>
                        <el-option value="2" label="菜单">菜单</el-option>
                        <el-option value="3" label="按钮">按钮</el-option>
                    </el-select>

                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">上级菜单</label>
                <div class="layui-input-block">

                    <el-select name="pid" v-model="form_data.pid">
                        <el-option :value="parseInt(item.id)" v-for="item in menus" :key="item.id" :label="item.title">{{item.spl}}{{item.title}}</el-option>
                    </el-select>

                    <p class="help-block"><b>必选</b>，请选择上级菜单或顶级菜单 ( 目前最多支持三级菜单 )</p>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label required">菜单名称</label>
                <div class="layui-input-block">
                    <input class="layui-input" type="text" autocomplete="off" name="title"  placeholder="请输入标题" v-model="form_data.title">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label required">URL地址</label>
                <div class="layui-input-block">
                    <input class="layui-input url-input" type="text" name="url"  placeholder="请输入URL地址" v-model="form_data.url">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label required">权限标识</label>
                <div class="layui-input-block">
                    <input class="layui-input perms-input" type="text" name="perms"  placeholder="请输入权限标识" v-model="form_data.perms">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">菜单图标</label>
                <div class="layui-input-block">
                    <div class="layui-input-inline">
                        <input placeholder="请输入或选择图标" name="icon" v-model="form_data.icon" class="layui-input">
                    </div>
                    <span style="padding:0 12px;min-width:45px" class='layui-btn layui-btn-primary'>
                        <i style="font-size:1.2em;margin:0;float:none" :class="form_data.icon"></i>
                    </span>
                    <button data-icon='icon' type='button' class='layui-btn layui-btn-primary'>选择图标</button>
                    <p class="help-block"><b>可选</b>，设置菜单选项前置图标，目前支持 layui 字体图标及 iconfont 定制字体图标。</p>
                </div>
            </div>

            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">备注</label>
                <div class="layui-input-block">
                    <textarea placeholder="请输入内容" class="layui-textarea" name="remark" v-model="form_data.remark"></textarea>
                </div>
            </div>

            <div class="text-center layui-form-actions1">
                <button class="layui-btn" type="submit" @click="OnSubmit" ref="submitbtn">保存</button>
                <button class="layui-btn layui-btn-danger" data-close data-confirm="确定要取消编辑吗？" type='button'>关闭</button>
            </div>

    </div>
</div>

<script th:inline="javascript" >
    require(['vue', 'ELEMENT'], function (Vue, ELEMENT) {
        ELEMENT.install(Vue)
        new Vue({
            el: '#app',
            data: {
                form_data: {},
                menus: []
            },
            methods: {
                // 保存数据
                OnSubmit: function(){

                    var that = this;

                    console.log(this.form_data)
                    that.$refs.submitbtn.disabled = true;

                    var params = {
                        type: this.form_data.type,
                        pid: this.form_data.pid,
                        title: this.form_data.title,
                        url: this.form_data.url,
                        perms: this.form_data.perms,
                        icon: this.form_data.icon,
                        remark: this.form_data.remark
                    };

                    if (this.form_data.id) {
                        params.id = this.form_data.id;
                    }

                    // 保存到服务器
                    $.ajax({
                        type : "POST",
                        url : "/system/menu/add",
                        data : params,
                        success : function(result) {
                            console.log(result);
                            if (result.code > 0) {
                                parent.layer.msg(result.info, {icon: 1, scrollbar: false, end: function(){
                                    parent.location.reload();
                                }, time: 2000, shadeClose: true});
                            } else {
                                parent.layer.msg(result.info, {icon: 2, scrollbar: false, time: 2000, shadeClose: true});
                            }
                            that.$refs.submitbtn.disabled = false;
                        },
                        error : function(e){
                            console.log(e.status);
                            console.log(e.responseText);
                            parent.layer.msg(e.responseText, {icon: 2, scrollbar: false, end: function(){}, time: 2000, shadeClose: true});
                            that.$refs.submitbtn.disabled = false;
                        }
                    });
                }
            },

            created: function () {

                var vo = [[${vo}]]

                if(vo != null) {
                    vo.type = String(vo.type)
                    this.form_data = vo
                } else {
                    var pid = [[${pid}]]
                    if(pid != null) {
                        this.form_data.pid = pid
                    }
                }

                let menus = [[${menus}]]
                menus = menus.filter(menu => menu.type !== 3);

                console.log("menus", menus)

                menus.push({
                    id: 0,
                    pid: -1,
                    title: "顶级菜单"
                })

                this.menus = $.utils.arr2table(menus)

                console.log("menus", this.menus)

            },


            mounted: function (){

                let that = this

                // 使用匿名函数监听来自 iframe 的消息
                window.addEventListener('message', (event) => {
                  console.log("ICON选择", event)
                  that.form_data.icon = event.data
                  that.$forceUpdate();
                });
            }

        })
    })
</script>

</body>

</html>